<template>
  <div>
    <el-form-item v-if="data.type == 'select'" label="占位内容">
      <el-input v-model="data.placeholder" clearable placeholder="占位内容" />
    </el-form-item>
    <div class="el-form-item el-form-item--small el-form--label-top">
      <label class="el-form-item__label" style="padding: 0">字典配置：</label>
      <div class="el-form-item__content">
        <el-tabs v-model="data.dicOption" stretch @tab-click="handleTabClick">
          <el-tab-pane label="静态数据" name="static">
            <draggable
              tag="ul"
              :list="data.dicData"
              :group="{ name: 'dic' }"
              ghost-class="ghost"
              handle=".drag-item"
            >
              <li v-for="(item, index) in data.dicData" :key="index">
                <i
                  class="drag-item el-icon-s-operation"
                  style="font-size: 16px; margin: 0 5px; cursor: move"
                />
                <el-input
                  v-model="item.label"
                  style="margin-right: 5px"
                  size="mini"
                  clearable
                  placeholder="label"
                />
                <!-- <el-input
                  v-model="item.value"
                  :style="{
                    'margin-right': data.type == 'select' ? '5px' : '0',
                  }"
                  size="mini"
                  clearable
                  placeholder="value"
                /> -->
                <el-input
                  v-if="data.type == 'select'"
                  v-model="item.desc"
                  size="mini"
                  clearable
                  placeholder="描述"
                />
                <el-button
                  circle
                  plain
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                  style="padding: 4px; margin-left: 5px"
                  @click="handleRemoveFields(index)"
                />
              </li>
            </draggable>
            <div style="margin-left: 22px">
              <el-button type="text" size="small" @click="handleAddFields">添加列</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="远端数据" name="remote">
            网址
            <el-input
              v-model="data.dicUrl"
              size="small"
              placeholder="远端数据字典网址"
            />
            远程搜索
            <el-switch v-model="data.remote" />
            <br />
            请求方法
            <el-select
              v-model="data.dicMethod"
              placeholder="请求方法"
              size="small"
              style="width: 100%"
            >
              <el-option label="POST" value="post" />
              <el-option label="GET" value="get" />
            </el-select>
            <p v-if="data.dicMethod == 'post'">
              请求参数
              <avue-dynamic v-model="data.dicQueryConfig" :children="option" />
            </p>
            <p v-if="data.dicUrl">
              返回结构
              <monaco-editor
                v-model="dicFormatter"
                height="80"
                :key-index="`dict-formatter-${data.prop}`"
                :options="options"
              />
            </p>
            <div class="el-form-item el-form-item--small el-form--label-top">
              <label class="el-form-item__label" style="padding: 0">
                字典key配置：
              </label>
              <div class="el-form-item__content">
                <ul>
                  <li v-for="(value, key) in data.props" :key="key">
                    <span style="width: 50px">{{ key }}</span>
                    <el-input
                      v-model="data.props[key]"
                      size="mini"
                      clearable
                      placeholder="key配置"
                    />
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-form-item
      v-if="data.dicOption == 'remote'"
      label="重新请求字典(crud)"
      label-width="150px"
    >
      <el-switch v-model="data.dicFlag" />
    </el-form-item>
    <template v-if="data.type == 'select'">
      <el-form-item label="是否多选">
        <el-switch v-model="data.multiple" />
      </el-form-item>
      <!-- <el-form-item v-if="data.multiple" label="是否可拖拽" label-width="110px">
        <template slot="label">
          <el-link
            :underline="false"
            href="https://avuejs.com/form/form-select.html#%E6%8B%96%E6%8B%BD"
            target="_blank"
          >
            是否可拖拽
            <i class="el-icon-question" />
          </el-link>
        </template>
        <el-switch v-model="data.drag" />
      </el-form-item> -->
      <el-form-item
        v-if="data.multiple"
        label="多选数量限制"
        label-width="110px"
      >
        <el-input-number
          v-model="data.limit"
          controls-position="right"
          placeholder="多选限制"
          :min="0"
          :max="data.dicData.length"
        />
      </el-form-item>
      <!-- <div class="el-form-item el-form-item--small el-form--label-top">
        <label class="el-form-item__label" style="padding: 0">级联配置：</label>
        <div class="el-form-item__content">
          <draggable
            tag="ul"
            :list="data.cascaderItem || data.cascader"
            :group="{ name: 'cascaderItem' }"
            ghost-class="ghost"
            handle=".drag-item"
          >
            <li
              v-for="(item, index) in data.cascaderItem || data.cascader"
              :key="index"
            >
              <i
                class="drag-item el-icon-s-operation"
                style="font-size: 16px; margin: 0 5px; cursor: move"
              />
              <el-input
                v-if="avueVersion('2.9.0')"
                v-model="data.cascaderItem[index]"
                size="mini"
                clearable
                placeholder="级联属性值"
              />
              <el-input
                v-else
                v-model="data.cascader[index]"
                size="mini"
                clearable
                placeholder="级联属性值"
              />
              <el-button
                circle
                plain
                type="danger"
                size="mini"
                icon="el-icon-minus"
                style="padding: 4px; margin-left: 5px"
                @click="handleRemoveCascaderItemFields(index)"
              />
            </li>
          </draggable>
          <div style="margin-left: 22px">
            <el-button type="text" @click="handleAddCascaderItemFields">
              添加列
            </el-button>
          </div>
        </div>
      </div>
      <el-form-item
        v-if="
          (data.cascaderItem || data.cascader) &&
            (data.cascaderItem || data.cascader).length > 0
        "
        label="级联默认选中"
        label-width="110px"
      >
        <el-input-number
          v-model="data.cascaderIndex"
          controls-position="right"
          placeholder="级联默认选中"
          :min="0"
        />
      </el-form-item> -->
      <el-form-item label="是否可清空" label-width="110px">
        <el-switch v-model="data.clearable" />
      </el-form-item>
      <el-form-item label="是否可搜索" label-width="110px">
        <el-switch v-model="data.filterable" />
      </el-form-item>
    </template>
    <template v-if="['radio', 'checkbox'].includes(data.type)">
      <!-- <el-form-item v-if="!data.button" label="边框">
        <el-switch v-model="data.border" />
      </el-form-item> -->
      <el-form-item v-if="!data.border" label="按钮">
        <el-switch v-model="data.button" />
      </el-form-item>
    </template>
    <el-form-item v-if="data.border || data.button" label="尺寸">
      <el-radio-group v-model="data.size" size="mini">
        <el-radio-button label="medium">正常</el-radio-button>
        <el-radio-button label="small">小</el-radio-button>
        <el-radio-button label="mini">超小</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script>
  import Draggable from 'vuedraggable'
  import MonacoEditor from '../utils/monaco-editor'

  export default {
    name: 'ConfigSelect',
    components: { Draggable, MonacoEditor },
    props: ['data'],
    data() {
      return {
        option: {
          column: [
            {
              type: 'input',
              prop: 'key',
              label: 'key',
            },
            {
              type: 'input',
              prop: 'value',
              label: 'value',
            },
          ],
        },
        options: {
          fullScreen: true,
          minimap: {
            enabled: false,
          },
        },
        dicFormatter: '',
      }
    },
    watch: {
      'data.prop': {
        handler() {
          if (!this.avueVersion('2.9.0') && this.data.cascaderItem) {
            this.$set(this.data, 'cascader', this.data.cascaderItem)
            this.$delete(this.data, 'cascaderItem')
          }
          const { dicFormatter } = this.data
          this.dicFormatter = dicFormatter
            ? dicFormatter + ''
            : '(res) => {\r\n  return res.data\r\n}'
        },
        immediate: true,
      },
      dicFormatter: {
        handler(val) {
          try {
            this.data.dicFormatter = eval(val)
          } catch (e) {
            // console.error(e)
          }
        },
      },
    },
    methods: {
      handleRemoveFields(index) {
        this.data.dicData.splice(index, 1)
      },
      handleAddFields() {
        const i = Math.ceil(Math.random() * 99999)
        this.data.dicData.push({ label: `字段${i}`, value: `col_${i}` })
      },
      handleRemoveCascaderItemFields(index) {
        if (this.avueVersion('2.9.0')) this.data.cascaderItem.splice(index, 1)
        else this.data.cascader.splice(index, 1)
      },
      handleAddCascaderItemFields() {
        if (this.avueVersion('2.9.0')) {
          if (!this.data.cascaderItem) {
            this.$set(this.data, 'cascaderItem', [])
          }
          this.data.cascaderItem.push('')
        } else {
          if (!this.data.cascader) {
            this.$set(this.data, 'cascader', [])
            delete this.data.cascaderItem
          }
          this.data.cascader.push('')
        }
      },
      handleTabClick({ name }) {
        if (name === 'remote') {
          if (!this.data.dicQueryConfig) {
            this.data.dicQueryConfig = []
          }
        }
        if (name === 'static') {
          this.data.props.label = 'label'
          this.data.props.value = 'value'
        }
      },
    },
  }
</script>
